<template>
  <div class="box">
      <header class="header">
        <ul>
          <li class="left" @click="$router.push('/classify')">
            <van-icon name="apps-o" color="#333" size="20"/>
          </li>
          <li class="center">
            <div class="search" @click="$router.push('/search')">搜索商品</div>
          </li>
          <li class="right">
            <van-icon name="more-o" color="#333" size="20"/>
          </li>
        </ul>
      </header>
      <section class="content" ref="content">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item of bannerlist" :key="item.bannerid" >
              <van-image height="2rem" :src="item.img" />
            </van-swipe-item>
          </van-swipe>
          <Nav>
            <!-- 使用组件 -->
          </Nav>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了"  @load="onLoad" :immediate-check="false">
            <Prolist :prolist="prolist"></Prolist>
          </van-list>
        </van-pull-refresh>
        <div class="back-top" v-show="flag" @click="backtop">
          <van-icon name="back-top" size="28" color="red" />
        </div>
      </section>
    </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, List, PullRefresh, Icon, Search } from 'vant'
import { getHomeBannerlistData, getHomeProlistData } from '../../api'
import Nav from './Nav'
import Prolist from './Prolist'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
Vue.use(Search)

export default {
  components: {
    Nav, // 注册组件
    Prolist
  },
  data () {
    return {
      bannerlist: [],
      prolist: [],
      loading: false, // 上拉加载时的状态
      finished: false, // 没有更多的数据了
      count: 2, // 默认的页码为1, 已经在mounted加载过一次了 ----上拉加载时的初始页码
      isLoading: false, // 表示下拉刷新时的初始状态
      flag: false,
      value: ''
    }
  },
  methods: {
    backtop () {
      // console.log(this.$refs.content)
      this.$refs.content.scrollTop = 0
    },
    // onRefresh () {
    //   // console.log('可以刷新数据')
    //   // 下拉刷新就是加载第一页的数据
    //   this.loading = true
    //   getHomeProlistData().then(res => {
    //     // 替换数据
    //     this.prolist = res.data.data
    //     this.count = 2 // 重置页码
    //     this.finished = false // 表示数据可以加载
    //     this.isLoading = false // 表示加载结束
    //   })
    // },
    async onRefresh () {
      // console.log('可以刷新数据')
      // 下拉刷新就是加载第一页的数据
      this.loading = true
      const res = await getHomeProlistData()
      this.prolist = res.data.data
      this.count = 2 
      this.finished = false
      this.isLoading = false
    },
    onLoad () {
      // console.log('可以加载数据')
      this.loading = true // 开始加载
      getHomeProlistData({
        limit: 10,
        count: this.count
      }).then(res => {
        this.loading = false // 加载结束
        if (res.data.data.length === 0) {
          this.finished = true // 没有数据
        } else {
          // 拼接数据 ----数组的合并 ---- .../ concat
          this.prolist = [...this.prolist, ...res.data.data]
        }
        // 本次加载结束，页码要加1
        this.count++
      })
    },
    scrollFn () {
      // 滚动时记录滚动条的位置
      localStorage.setItem('top', this.$refs.content.scrollTop)
      if (this.$refs.content.scrollTop > 200) {
        this.flag = true
      } else {
        this.flag = false
      }
    }
  },
  activated () { // 保留组件的状态，不会触发销毁和重建，触发的是activated 和deactivated
    this.$refs.content.scrollTop = localStorage.getItem('top')
  },
  // mounted () {
  //   // fetch('/banner')
  //   //   .then(res => res.json())
  //   //   .then(data => {
  //   //     console.log(data)
  //   //   })
  //   getHomeBannerlistData().then(res => {
  //     // console.log(res)
  //     this.bannerlist = res.data.data
  //   })
  //   getHomeProlistData().then(res => {
  //     this.prolist = res.data.data
  //     // 第一次数据加载完毕，开始监听滚动条
  //     // console.log(this.$refs.content)
  //     this.$refs.content.addEventListener('scroll', this.scrollFn)
  //   })
  // },
  async mounted () {
    const res1 = await getHomeBannerlistData()
    const res2 = await getHomeProlistData()
    this.bannerlist = res1.data.data
    this.prolist = res2.data.data
    this.$refs.content.addEventListener('scroll', this.scrollFn)
  },
  beforeDestroy () {
    this.$refs.content.removeEventListener('scroll', this.scrollFn)
  }
}
</script>
<style lang="scss" scoped>
.header {
  background: red;
  ul {
    height: 100%;
    display: flex;
    li {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &:nth-child(1), &:nth-child(3) {
        color: #fff;
        margin: 0 10px 0 10px
      }
      &:nth-child(2) {
        flex: 1;
        .search {
          width: 80%;
          height: 0.3rem;
          background: #efefef;
          color: #666;
          padding-left: 12px;
          line-height: 0.3rem;
          border-radius: 20px;
        }
      }
      .van-icon van-icon-apps-o {
      }
    }
  }
}
.my-swipe .van-swipe-item {
  //scoped 表示只在当前起作用
  height: 2rem;
  }
.back-top {
  position: fixed;
  bottom: 0.8rem;
  right: 0.1rem;
  width:0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
</style>>
